<template>
  <div class="app-container">
    <el-dialog
      v-model="dialogVisible"
      title="选择时间"
      width="21%"
      :show-close="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      v-dialog-drag
    >
      <el-form ref="formRef" :model="form" label-width="66px">
        <el-form-item label="开始时间">
          <el-time-select v-model="form.startTime" clearable placeholder="请选择开始时间">
          </el-time-select>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-time-select v-model="form.endTime" clearable placeholder="请选择结束时间">
          </el-time-select>
        </el-form-item>
        <div class="form_def_text">注：该时段不可使用优惠券</div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 定义 emits
const emit = defineEmits(['refreshShow'])

// 定义响应式数据
const dialogVisible = ref(false)
const formRef = ref()

const form = reactive({
  startTime: null as string | null,
  endTime: null as string | null,
})

// 加载数据
const init = () => {
  dialogVisible.value = true
}

// 提交表单
const submitForm = () => {
  if (!form.startTime || !form.endTime) {
    ElMessage.warning('请选择时间')
    return
  }
  if (form.startTime && form.endTime) {
    if (form.startTime > form.endTime) {
      ElMessage.warning('开始时间不能大于结束时间')
      return
    }
  }
  dialogVisible.value = false
  emit('refreshShow', {
    type: 'chooseTime',
    limitStartTime: form.startTime,
    limitEndTime: form.endTime,
  })
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  emit('refreshShow')
}

// 暴露方法给父组件
defineExpose({
  init,
})
</script>

<style scoped lang="scss">
:deep(.el-dialog) {
  border-radius: 6px;
  .el-dialog__body {
    padding: 8px 23px 0 17px;
  }
  .el-form-item {
    margin-bottom: 11px;
  }
  .el-date-editor {
    width: 100%;
    .el-input__inner {
      border-radius: 6px;
    }
  }
  .el-form-item__label {
    padding-right: 9px;
  }
  .el-dialog__footer {
    padding-top: 20px;
    padding-bottom: 12px;
  }
  .dialog-footer {
    .el-button {
      width: 53px;
      height: 28px;
      line-height: 28px;
      border-radius: 3px;
      & + .el-button {
        margin-left: 9px;
      }
    }
  }
}
.form_def_text {
  font-size: 10px;
  font-weight: 400;
  color: rgba(56, 56, 56, 1);
}

:deep(.el-dialog__header) {
  border-radius: 6px 6px 0 0;
  background: rgba(243, 244, 246, 1);
  padding: 12px 15px;
  .el-dialog__title {
    font-size: 14px;
    color: #383838;
  }
}
</style>
